<template>
  <div class="service">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 远程开锁 </span>
    </div>
    
     <div class="type-info-address">
        <i class="el-icon-user-solid"></i>
        <div class="type-text">我的门禁卡</div>
      </div>
    <div class="typetextarea"  v-for="item in cardlist" :key="item" @click="changecolor($event), Select(item.address)">
      <img src="./img/头像.png">
      <div class="info" id="info">
        <strong>业主:</strong> patrick
        <br>
        <strong>联系电话:</strong> 1234458834
        <br>
         <strong>地址:</strong> {{item.address}}
        </div>
    </div>
    <div class="commit" @click=commit()>点击开锁</div>
  </div>

</template>

<script>
export default {
  name: 'remoteunclock',
  data() {
      return {
        select:'',
        cardlist:[{
         address:'xx小区10栋A404'
        },{
        address:'xx小区3栋A1402'
        },{
        address:'xx小区6栋B1204'
        }]
      }
    },
  methods: {
      

     toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
     changecolor(e){
       let div = document.getElementsByClassName("typetextarea");
       div.forEach((item) => {
        //  console.log(item);
        item.style.backgroundColor='#F7F7F7';
        // item.style.color = 'green';
      },)
      if(e.target.id=='info'){
        e.target.parentElement.style.backgroundColor='rgb(201, 200, 200)';
      }
      else{
          e.target.style.backgroundColor='rgb(201, 200, 200)';
      }
      // console.log(123);
      },
    Select(text){
      this.select=text;
    },
    commit(){
        
        if(this.select==''){
           this.$confirm(
         '请选择门禁卡', {
          
          customClass: 'message-logout12',
           dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          type: 'warning'
        });
        }
        else{
             
              this.$confirm(
        '地址：'+this.select+'<br>', '是否确认开锁？', {
          customClass: 'message-logout12',
           dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            showClose: true,
            type: 'success',
            message: '开锁成功!'
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '已取消'
          });          
        });
        }
       
    }
   
},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.message-logout12 {
    width: 300px;
    margin-top:100px;
    background-color:#bcc9c5;
  }
</style>
<style scoped>


.i{
  font-size:30px;
  margin-top:25px;
  margin-bottom: 10px;
}
 
.el-icon-user-solid{
  color:#6a8171;
  font-size:24px;
  margin-top:13px;
  margin-left:7px;
}

.type-text{
   height:20px;
   width:120px;
   font-size:15px;
   margin-top:14px;
   margin-left:7px;

 }
 
.type-info-address{
  display: flex;
  height:60px;
 
}
.type-info-text{
  height:20px;
  width:80px;
  margin-top:20px;
  margin-left:17px;
  font-size: 15px;
}

.typetextarea{
  height:185px;
  width:345px;
  margin-top:10px;
  margin-left:7px;
  border-radius: 10px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(232, 233, 232, 0.747) inset;
  display: flex;
}
 .jiaofei-text{
   width:100px;
   margin-left:123px;
 }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
  }
  .commit{
  text-align: center;
  height:45px;
  width:345px;
  margin-top:20px;
  margin-left:7px;
  border-radius: 10px;
    background-color:#dfeeea;;
   
    box-shadow: 1px 1px 5px #a7c4bc;
  line-height: 45px;
  font-weight: bold;
  }
  img{
    height:100px;
    width:100px;
    margin-top:35px;
    margin-left:20px;
    border-radius: 10px;
  }
  .info{
    height:100px;
    width:200px;
    margin-top:46px;
    margin-left:20px;
    line-height: 30px;
    font-size:15px;
  }
 
</style>
